<template>
   <div id="assets">
       <mainHeader></mainHeader>
     	<!-- assets start -->
     	<div class="assets_nav">
     		<el-row>
     			<el-col :span="3">标的物类型</el-col>
     			<el-col :span="21">
     				<a href="">商场</a>
     				<a href="">商铺</a>
     				<a href="">写字楼</a>
     				<a href="">住宅</a>
     				<a href="">工业产房</a>
     				<a href="">徒弟</a>
     				<a href="">工业产房</a>
     				<a href="">商场</a>
     			</el-col>
     		</el-row>
     		<el-row>
     			<el-col :span="3">地区选择</el-col>
     			<el-col :span="21">
     				<span>商场</span>
     				<span>商场</span>
     				<span>商场</span>
     				<p><a href="">全省</a><a href="">全省</a><a href="">全省</a></p>
     			</el-col>
     		</el-row>
     		<el-row>
     			<el-col :span="3">价格</el-col>
     			<el-col :span="21">
     				<a href="">商场</a>
     				<a href="">商铺</a>
     				<a href="">写字楼</a>
     				<a href="">住宅</a>
     				<a href="">工业产房</a>
     				<a href="">徒弟</a>
     				<a href="">工业产房</a>
     				<a href="">商场</a>
     			</el-col>
     		</el-row>
     		<el-row>
     			<el-col :span="3">收藏频率：</el-col>
     			<el-col :span="21">
     				<span>不限</span>
     				<span>收藏由高到低</span>
     				<span>收藏由低到高</span>
     			</el-col>
     		</el-row>
     	</div>
    	<div class="assets_public">
     		<el-row>
     			<el-col :span="5">公有资产物<font>（11367）</font></el-col>
     			<el-col :span="5">
     				价格<span><em>￥</em><input type="text"></span> - <span><em>￥</em><input type="text"></span>万元
     			</el-col>
     			<el-col :span="10">
     				<a href="javascript:;">默认</a>
     				<a href="javascript:;">价格<i class="iconfont">&#xe635;</i></a>
     				<a href="javascript:;">价格<i class="iconfont">&#xe636;</i></a>
     				<a href="javascript:;">收藏次数<i class="iconfont">&#xe635;</i></a>
     				<a href="javascript:;">最新发布<i class="iconfont">&#xe636;</i></a>
     			</el-col>
     			<el-col :span="4">
     				<input type="text" placeholder="请输入关键字搜索"/>
					<i class="iconfont">&#xe607;</i>
     			</el-col>
     		</el-row>
     	</div>
		<div class="assets_list">
			<h2 class="ititle">预售<span>Open to booking</span><a href="">查看更多<em class="icon">&gt;</em></a></h2>
			<assetList assets-Type="data"></assetList>
		</div>
		<div class="assets_list">
			<h2 class="ititle">平台精选<span>Platform selection</span><a href="">查看更多<em class="icon">&gt;</em></a></h2>
			<assetList assets-Type="heatNew"></assetList>
		</div>
		<div class="assets_list">
			<h2 class="ititle">厂房资产<span>Plat assets</span><a href="">查看更多<em class="icon">&gt;</em></a></h2>
			<assetList assets-Type="heat"></assetList>
		</div>
		<!-- assets end -->
       <mainFooter></mainFooter>
   </div>
</template>

<script>
    import * as head from '../main/main';
    import * as asset from './asset/main';
    export default {
    	name:'assets',
		data() {
            return{

			}
		},
        components:{
            mainHeader:head.header,
            mainFooter:head.footer,
			assetList:asset.asset
        },
        computed:{
           type() {
          //     return this.$route.params.type;
		   }
		},
    }
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../public/css/variable.less';
   .assets_nav{
   		width: 1200px;
   	  border: 1px solid #eff1f2;
	    margin: 40px auto 15px;
	    .el-row{
	    	color: #5d5f63;
	    	background: #f9f9f9;
	    	border-top: 1px solid #eff1f2;
	    	&:first-child{
	    		border-top:0;
	    	}
	    }
	    .el-col{
    	    padding: 15px 0;
    	    border-left: 1px solid #eff1f2;
		    a,span{
		    	cursor: pointer;
			    display: inline-block;
			    font-size: 14px;
			    color: #8f9397;
			    margin: 0 20px;
			    padding: 10px;
			    &:hover{
			    	color: @cgolden;
			    }
		    }
		    p{
		    	background: #fbfbfb;
			    border: 1px solid #eff1f2;
			    padding: 5px 0;
			    font-size: 13px;
			    color: #a6abaf;
			    margin-bottom: -15px;
			    margin-top: 15px;
		    }
	    	&:first-child{
			    padding: 25px 0 25px 40px;
			    border-left: 0;
			    box-sizing: border-box;
	    	}
	        &:last-child{ background: @cw; }
		}
   }
   .assets_public{
   		width: 1200px;
   	    border: 1px solid #eff1f2;
	    margin: 15px auto;
        padding: 30px 0;
	    box-sizing: border-box;
	    height: 85px;
	    .fonts(14px);
	    .bdr(5px);
    	color: #8f9397;
    	text-align: center;
    	.el-col{
    		&:first-child{
    			color: #5d5f63;
    			.fonts(16px);
    		}
    		&:last-child{
    			position: relative;
    			float: right;
			    input{
			    	float: right;
			    	width: 160px;
				    border: 1px solid #afb3b8;
				    padding: 4px 10px;
				    font-size: 12px;
				    outline: 0;
				    .bdr(5px);
			    }
			    i{
			    	position: absolute;
			    	right: 5px;
			    	top: 6px;
			    }
    		}
    	}
    	span{
    		position: relative;
    		input{
    			width: 65px;
			    .bdr(3px);
			    border: 1px solid #afb3b8;
			    padding: 4px 10px 4px 25px;
			    box-sizing: border-box;
			    margin: 0 10px;
			    .fonts(12px);
			    outline: 0;
    		}
    		em{
    			position: absolute;
			    top: 4px;
			    left: 15px;
			    color: #afb3b8;
    		}
    	}
	    font{
	    	color: @cgolden;
	    }
	    a{
	    	cursor: pointer;
		    display: inline-block;
		    margin: 5px 17px 0;
		    color: #8f9397;
	    }
   }
   .assets_list{
   		width: 1200px;
   	    border: 1px solid #eff1f2;
	    padding: 45px 42px 60px;
	    box-sizing: border-box;
	    margin: 15px auto;
	    h2{
	    	position: relative;
		    font-size: 20px;
		    color: #5d5f63;
		    margin-bottom: 30px;
		    border-bottom: 1px solid #ebebeb;
		    padding-bottom: 15px;
		    span{
		    	display: inline-block;
			    font-size: 14px;
			    color: #cac9c9;
			    padding-left: 15px;
			    vertical-align: middle;
		    }
		    a{
		    	float: right;
			    color: #aeb1b3;
			    font-size: 12px;
			    margin-top: 6px;
		    }
		    &:before{
		    	position: absolute;
			    content: "";
			    left: 0;
			    bottom: 0;
			    width: 50px;
			    height: 3px;
			    background: #d8b26a;
		    }
	    }
   }
</style>